Vue.createApp({
	data() {
		return {
			check: false, //全部全选
			shopList: [{
					shop: 'MEIZU耳机',
					check: false,
					list: [{
							id: 1,
							title: 'MEIZU UR 高端定制耳机',
							img: 'images/p1.png',
							price: 5800,
							num: 1,
							check: false,
						},
						{
							id: 2,
							title: '魅族 POP2 真无线蓝牙耳机',
							img: 'images/p6.png',
							price: 4800,
							num: 1,
							check: false,
						}
					]
				},
				{
					shop: 'MEIZU耳机',
					check: false,
					list: [{
							id: 3,
							title: '魅族 16Xs',
							img: 'images/p2.png',
							price: 5800,
							num: 1,
							check: false,
						},
						{
							id: 4,
							title: '魅族 16s Pro',
							img: 'images/p3.png',
							price: 4800,
							num: 1,
							check: false,
						}
					]
				}
			]
		};
	},
	computed:{
		total(){
			let c=0
			this.shopList.forEach(shop=>{
				shop.list.forEach(goods=>{
					c+=goods.num
				})
			})
			return c
		},
		checkNum(){
				let c=0
				this.shopList.forEach(shop=>{
					shop.list.forEach(goods=>{
						if(goods.check){
							c+=goods.num
						}
					})
				})
				return c
		}
		
	},

	
	watch: {
		shopList: {
			handler() {
				//如果有一个店铺没有勾选，取消全选
				let not_list = this.shopList.filter(shop => !shop.chexck)
				if (not_list.length > 0) {
					this.check = false
				} else {
					this.check = true
				}
			},
			deep: true
		}
	},
	methods: {
		del(i, j) { //i店铺下标
			if (confirm('确认删除该商品？')) {
				if (i >= 0) { //单个删除
					this.shopList[i].list.splice(j, 1)
				} else { //多个删除
					this.shopList.forEach(shop => {
						shop.list = shop.list.filter(goods => !goods.check)
					})
				}
				//删除没有商品店铺
				this.shopList = this.shopList.filter(shop => shop.list.length > 0)
			}
		},
		shopCheck(i, status) { //店铺全选取消
			//将该店铺下的所有商品勾选状态改成和店铺一样
			this.shopList[i].list.forEach(goods => {
				goods.check = status
			})
		},
		allCheck() { //全部店铺商品
			this.shopList.forEach(shop => {
				shop.check = this.check
				shop.list.forEach(goods => {
					goods.check = this.check
				})
			})
		},
		goodsCheck(i, status) {
			if (!status) {
				this.shopList[i].check = false
			} else {
				let not_list = this.shopList[i].list.filter(goods => !goods.check)
				if (not_list.length == 0) this.shopList[i].check = true
			}
		}
	}
}).mount('table')
